<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<!-- 占位 -->
		<!-- <view class="place"></view> -->

		<view class="order-title-box">
			<view class="order-title">
				<view class="order-title-item" :class="{ active : active1 }" @tap="version('0')">
					<text>全部</text>
				</view>
				<view class="order-title-item" :class="{ active : active2 }" @tap="version('10')">
					<text>已发布</text>
				</view>
				<view class="order-title-item" :class="{ active : active3 }" @tap="version('20')">
					<text>工作中</text>
				</view>
				<view class="order-title-item" :class="{ active : active4 }" @tap="version('30')">
					<text>已完成</text>
				</view>
				<!-- <view class="order-title-item" :class="{ active : active5 }" @tap="version('40')">
					<text>已结算</text>
				</view> -->
			</view>
		</view>


		<!-- 空白页 -->
		<empty v-if="isLoaded === false" :top="182"></empty>

		<view class="" v-show="isLoaded">
			<view class="list" v-if="jobData.length > 0">
				<view class="list-item" v-for="item in jobData" :key="item.id">
					<view class="img-wrapper" @tap="checkDetail(item.id,item.job_title)">

						<view class="img-wrapper-header">
							<image class="pic" :src="item.logo">
							</image>
							<view class="img-wrapper-center">
								<text>{{item.job_title}}</text>
								<image class="img-wrapper-center-button" src="@/static/images/rijie.png" alt=""></image>

							</view>
							<text class="img-wrapper-right">{{item.salary}}元/天</text>
						</view>


						<text class="introduce">
							{{item.description}}
						</text>
					</view>
					<view class="bot">
						<text class="bot-text">{{item.updatetime}}</text>
						<view class="bot-img-text">
							<image class="bot-img" src="@/static/images/place.png"></image>
							<text class="bot-text">{{item.location}}</text>
						</view>
					</view>
					<view class="operator" v-if="item.job_status == 10">
						<view class="operator-img-pay" @click="gopay(item.id,item.total)">去支付</view>
					</view>
					<view class="operator" v-if="item.job_status == 20">
						<view class="operator-img-finish" @click="gofinishwork(item.id)">项目完成</view>
					</view>
				</view>

			</view>
			<view class="empty" v-else>
				<image src="/static/images/zanwushuju.png" alt="" class="empty-img"></image>
			</view>
		</view>

		<!-- 弹出框 -->
		<uni-popup ref="alertDialog1" type="dialog">
			<uni-popup-dialog :type="msgType" title="支付订单" content="" @confirm="clickConfirm(1)">
				<view class="" style="display: flex;flex-direction: column;width: 100%;">
					<view class="money">
						<view class="money2">
							￥{{total}}
						</view>
					</view>
					<view class="pay">
						<view class="wxpay">
							<image class="wxpay-img" src="/static/images/weixinzhifu.png"></image>
							<text>微信支付</text>
							<image class="wxpay-img2" :src="src1" @tap="toggle(1)"></image>
						</view>
						<!-- <view class="alipay" style="margin-bottom: 40rpx;">
							<image class="alipay-img" src="/static/images/zhifubaozhifu.png"></image>
							<text>支付宝支付</text>
							<image class="alipay-img2" :src="src2" @tap="toggle(2)"></image>
						</view> -->

						<view class="alipay">
							<image class="alipay-img" src="/static/images/jifen.png"></image>
							<text>积分支付</text>
							<image class="alipay-img2" :src="src3" @tap="toggle(3)"></image>
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="alertDialog2" type="dialog">
			<uni-popup-dialog :type="msgType" title="" content="" @confirm="clickConfirm(2)">
				<view class="" style="font-size: 30rpx;">
					确定工程完结了吗？
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<!-- 底部菜单 -->
		<BottomTabbar :selected="3"></BottomTabbar>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				title: '',
				// menuTop: '196',

				loadingText: "正在加载...",
				defaultSelected: [],

				jobData: [],
				page: 1,
				isLoaded: false,

				active1: true,
				active2: false,
				active3: false,
				active4: false,
				active5: false,

				status: 0,
				msgType: 'info',
				showDialog_1: false,
				showDialog_2: false,
				confirmColor: '#f3431a',
				paytype: 1,
				src1: '/static/images/dui.png',
				src2: '/static/images/weixuanzhong.png',
				src3: '/static/images/weixuanzhong.png',
				total: 0,

				jobId: '',
				jobStatus: '',
				baseUrl: 'https://ldlwn.hnliandesy.com/api/',

				strings: '',
				cate: 1
			}
		},

		components: {
			BottomTabbar,
			empty
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			this.loadData()

			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 600)
		},

		//下拉到底获取新的数据
		onReachBottom() {
			this.getNewJobs();
		},

		onLoad: function(option) {
			//判断是否登录
			// let result = this.$api.isLogin();
			// if (result === false) {
			// 	return false;
			// }
			let token = uni.getStorageSync('token');
			let cate = uni.getStorageSync('cate');
			if (token && cate > 0) {
				this.$store.state.hasLogin = true
			}

			if ([1, 2].indexOf(cate) > -1) {
				this.cate = uni.getStorageSync('cate')
			}

			this.status = option.status;
			switch (option.status) {
				case '0':
					this.active1 = true;
					this.active2 = false;
					this.active3 = false;
					this.active4 = false;
					this.active5 = false;
					break;
				case '10':
					this.active1 = false;
					this.active2 = true;
					this.active3 = false;
					this.active4 = false;
					this.active5 = false;
					break;
				case '20':
					this.active1 = false;
					this.active2 = false;
					this.active3 = true;
					this.active4 = false;
					this.active5 = false;
					break;
				case '30':
					this.active1 = false;
					this.active2 = false;
					this.active3 = false;
					this.active4 = true;
					this.active5 = false;
					break;
					// case '40':
					// 	this.active1 = false;
					// 	this.active2 = false;
					// 	this.active3 = false;
					// 	this.active4 = false;
					// 	this.active5 = true;
					// 	break;
			}

			uni.showLoading({
				title: '加载中...'
			});
			this.title = decodeURI(option.title);
			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

			// #ifdef H5
			if (this.$wechat && this.$wechat.isWechat()) {
				this.paytype = 1;
			}
			// #endif
		},
		methods: {
			...mapMutations(['login']),
			...mapState(['hasLogin']),

			async loadData() {
				this.page = 1;
				this.getNewJobs();
			},
			async version(id) {
				this.status = id;
				switch (id) {
					case '0':
						this.active1 = true;
						this.active2 = false;
						this.active3 = false;
						this.active4 = false;
						this.active5 = false;
						break;
					case '10':
						this.active1 = false;
						this.active2 = true;
						this.active3 = false;
						this.active4 = false;
						this.active5 = false;
						break;
					case '20':
						this.active1 = false;
						this.active2 = false;
						this.active3 = true;
						this.active4 = false;
						this.active5 = false;
						break;
					case '30':
						this.active1 = false;
						this.active2 = false;
						this.active3 = false;
						this.active4 = true;
						this.active5 = false;
						break;
						// case '40':
						// 	this.active1 = false;
						// 	this.active2 = false;
						// 	this.active3 = false;
						// 	this.active4 = false;
						// 	this.active5 = true;
						// 	break;
				}

				uni.showLoading({
					title: '加载中...'
				});
				this.loadData();
				setTimeout(() => {
					this.isLoaded = true;
					uni.hideLoading();
				}, 600)
			},

			//职位列表
			async getNewJobs() {
				let token = uni.getStorageSync('token');
				let dataObj = {
					page: this.page,
					token: token,
					status: this.status
				}
				let jdata = await this.$myRequest({
					url: '/companyJobs',
					data: dataObj,
					methods: 'POST'
				})
				let ndata = jdata.data.data;

				if (this.page === 1) {
					this.jobData = ndata;
					if (ndata.length === 0) {
						this.$api.msg('亲！暂无数据！！！')
					} else {
						this.page = this.page + 1;
					}
				} else {
					if (ndata.length === 0) {
						if (this.jobData.length === 0) {
							this.$api.msg('亲！暂无数据！！！')
						} else {
							this.$api.msg('亲！已经到底了！！！')
						}

					} else {
						this.jobData = [...this.jobData, ...ndata];
						this.page = this.page + 1;
					}
				}
			},

			async checkDetail(id, title) {
				uni.navigateTo({
					url: '/pages1/pages/project-detail/project-detail?id=' + id + '&title=' + title + '详情'
				});
			},

			//去支付
			async gopay(id, total) {
				this.total = total;
				this.jobId = id;
				this.jobStatus = 20;
				// #ifdef APP-PLUS
				this.$refs.alertDialog1.open()
				// #endif

				// #ifdef H5
				if (this.$wechat && this.$wechat.isWechat()) {
					uni.navigateTo({
						url: '/pages4/pages/wxPay/wxPay?jobId=' + id
					})
				} else {
					this.$refs.alertDialog1.open()
				}

				// #endif

				// #ifdef MP-WEIXIN

				uni.navigateTo({
					url: '/pages4/pages/wxPay/wxPay?jobId=' + id
				})

				// #endif
			},

			async gofinishwork(id) {
				this.jobId = id;
				this.jobStatus = 30;
				this.$refs.alertDialog2.open()
			},

			async toggle(type) {
				switch (type) {
					case 1:
						this.src1 = '/static/images/dui.png';
						this.src2 = '/static/images/weixuanzhong.png';
						this.src3 = '/static/images/weixuanzhong.png';
						this.paytype = 1;
						break;
					case 2:
						this.src1 = '/static/images/weixuanzhong.png';
						this.src2 = '/static/images/dui.png';
						this.src3 = '/static/images/weixuanzhong.png';
						this.paytype = 2;
						break;
					case 3:
						this.src1 = '/static/images/weixuanzhong.png';
						this.src2 = '/static/images/weixuanzhong.png';
						this.src3 = '/static/images/dui.png';
						this.paytype = 3;
						break;
				}
			},

			async clickConfirm(order_type) {
				this.changeStatus(order_type);
			},

			async changeStatus(order_type) {
				let token = uni.getStorageSync('token');
				let dataObj = {
					token: token,
					jobId: this.jobId,
					paytype: this.paytype,
					status: this.jobStatus
				}
				if (order_type == 1) {
					// 支付
					switch (this.paytype) {
						case 1:
							this.wxPay(dataObj);
							break;
						case 2:
							this.aliPay(dataObj);
							break;
						case 3:
							this.moneyPay(dataObj);
							break;
					}
				} else {
					let res = await this.$myRequest({
						url: '/changeJobStatus',
						data: dataObj,
						methods: 'POST'
					})
					if (res.data.status == 1) {
						this.$api.msg(res.data.msg, 1000);
						if (this.page > 1) {
							--this.page;
						}
						this.getNewJobs();
					} else {
						this.$api.msg(res.data.msg);
					}
				}

			},

			async moneyPay(dataObj) {
				let res = await this.$myRequest({
					url: '/moneyPay',
					data: dataObj,
					methods: 'POST'
				})
				if (res.data.status == 1) {
					this.$api.msg(res.data.msg, 1000);
					if (this.page > 1) {
						--this.page;
					}
					this.getNewJobs();
				} else {
					this.$api.msg(res.data.msg);
				}
			},

			//支付宝支付
			async aliPay(dataObj) {
				// #ifdef APP-PLUS
				dataObj.type = 4;
				uni.getProvider({ //获取可用的支付环境
					service: 'payment',
					success: res => {
						if (~res.provider.indexOf('alipay')) { //先判断用户是否有支付宝支付环境
							uni.showLoading({
								title: '正在调起支付宝支付'
							})

							uni.request({ //再从后端接口获取相关数据配置到orderInfo里，这个接口由后端配置好了，返回结果见下图1-支付宝
								url: this.baseUrl + 'changeJobStatus',
								method: 'POST',
								data: dataObj,
								dataType: "json",
								success: res => {
									if (res.statusCode == 200) {
										if (res.data.status == 0) {
											this.$api.msg(res.data.msg);
											return false;
										}
										let payInfo = res
											.data //拿到后端返回数据后调用下面支付函数（若接口返回obj,需先转成string类型）
										payInfo = payInfo.replace(/\r|\n/ig, "")
										uni.requestPayment({
											provider: 'alipay',
											orderInfo: payInfo, //支付宝订单数据（string类型）
											success: res => {
												uni.hideLoading();
												this.$api.msg('支付成功！', 'success');
												if (this.page > 1) {
													--this.page;
												}
												this.getNewJobs();
											},
											fail: err => {
												uni.hideLoading();
												this.$api.msg('支付失败！');
											}
										});
									}
								},
								fail: () => {
									uni.hideLoading();
									this.$api.msg('服务器开小差了呢，请您稍后再试');
								}
							});
						} else {
							uni.showToast({
								title: '获取支付宝通道失败，请检查您的支付宝是否正常启用',
								icon: 'none'
							})
						}
					}
				});
				// #endif

				// #ifdef H5
				dataObj.type = 3;
				let res = await this.$myRequest({
					url: '/changeJobStatus',
					data: dataObj,
					methods: 'POST',
				})

				let payInfo = res.data

				if (payInfo) {
					document.querySelector('.form').innerHTML = payInfo;
					document.forms[0].submit();
				}
				// #endif
			},

			//微信支付
			wxPay(dataObj) {
				// #ifdef APP-PLUS
				uni.getProvider({
					service: 'payment',
					success: res => {
						if (~res.provider.indexOf('wxpay')) { //先判断用户是否有微信支付环境（是否安装了微信app）
							uni.showLoading({
								title: '正在调起微信支付'
							})

							dataObj.type = 4;

							uni.request({
								url: this.baseUrl + 'changeJobStatus',
								method: 'POST',
								data: dataObj,
								dataType: "json",
								success: (res) => {
									if (res.data.status == 4) {
										//（这里注意后端返回的数据类型是string还是object，需转成object类型）
										let resobj = res.data.data;
										let payInfo = {
											appid: resobj.appid,
											noncestr: resobj.nonce_str,
											package: "Sign=WXPay",
											partnerid: resobj.mch_id,
											prepayid: resobj.prepay_id,
											timestamp: resobj.time_stamp,
											sign: resobj.sign,
										}

										uni.requestPayment({
											provider: 'wxpay',
											orderInfo: payInfo, //微信订单数据（Object类型）
											success: (res) => {
												uni.hideLoading();
												this.$api.msg('支付成功！', 'success');
												if (this.page > 1) {
													--this.page;
												}
												this.getNewJobs();
											},
											fail: (err) => {
												uni.hideLoading();
												this.$api.msg('支付失败！');
											}
										});
									} else if (res.data.status == 0) {
										this.$api.msg(res.data.msg);
									}
								},
								fail: (err) => {
									uni.hideLoading();
									this.$api.msg('服务器开小差了呢，请您稍后再试');
								}
							})
						} else {
							uni.showToast({
								title: '获取微信通道失败，请检查您的微信是否正常启用',
								icon: 'none'
							})
						}
					}
				});
				// #endif
				// #ifdef H5

				dataObj.type = 3;
				this.wxPayH5(dataObj);

				// #endif
			},

			async wxPayH5(dataObj) {
				let res = await this.$myRequest({
					url: '/changeJobStatus',
					data: dataObj,
					methods: 'POST',
				})

				if (res.data.status == 3) {
					let info = res.data.data
					window.location.href = info;
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.order-title-box {
		position: fixed;
		// #ifdef APP-PLUS
		top: 160rpx;
		// #endif

		// #ifdef MP-WEIXIN
		top: 160rpx;
		// #endif

		// #ifdef H5
		top: 100rpx;
		// #endif

		width: 100%;
		background-color: #ffffff;
		font-size: 30rpx;
		z-index: 100;

		.order-title {
			height: 78rpx;
			padding: 18rpx 42rpx 18rpx;
			display: flex;
			justify-content: space-between;

			.order-title-item {
				height: 42rpx;
			}
		}
	}

	.list {
		// #ifdef APP-PLUS
		padding: 253rpx 15rpx 135rpx;
		// #endif

		// #ifdef MP-WEIXIN
		padding: 253rpx 15rpx 135rpx;
		// #endif

		// #ifdef H5
		padding: 193rpx 15rpx 135rpx;
		// #endif

		.list-item {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			/* height: 362rpx; */
			border-radius: 10rpx;
			margin-bottom: 15rpx;

			.img-wrapper {
				width: 100%;
				height: 286rpx;
				position: relative;
				padding: 27rpx;
				border-bottom: 1px solid #f3f3f6;

				.img-wrapper-header {
					margin-bottom: 27rpx;
					height: 112rpx;
					position: relative;

					.pic {
						width: 112rpx;
						height: 112rpx;
						border-radius: 6upx;
						margin-right: 17rpx;
					}

					.img-wrapper-center {
						max-width: 55%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						height: 112rpx;
						display: inline-block;
						position: absolute;
						line-height: 56rpx;
						font-size: 30rpx;

						.img-wrapper-center-button {
							/* display: inline-block; */
							width: 63rpx;
							height: 39rpx;

							display: flex;
							align-items: center;
						}
					}

					.img-wrapper-right {
						position: absolute;
						top: 0;
						right: 0;
						color: #f3431a;
						font-size: 26rpx;
						line-height: 56rpx;
						height: 56rpx;
					}
				}

				.introduce {
					height: 96rpx;
					display: flex;
					flex-direction: column;
					line-height: 48rpx;
					font-size: $font-base !important;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					color: #676767;
				}
			}

			.bot {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 78rpx;
				font-size: 28upx;
				color: #676767;
				padding: 0 27rpx;
				width: 100%;
				border-bottom: 1px solid #f3f3f6;


				.bot-img-text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					max-width: 360rpx;

					.bot-img {
						height: $font-base;
						width: 26rpx;
						margin-right: 14rpx;

					}

					.bot-text {
						max-width: 320rpx;
						display: inline-block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.operator {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 86rpx;
				/* font-size: 28upx; */
				color: #676767;
				padding: 0 27rpx;
				width: 100%;

				.operator-img-pay,
				.operator-img-finish {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f3431a;

					height: 52rpx;
					color: #fff;
					border-radius: 5rpx;
				}

				.operator-img-pay {
					width: 132rpx;
					height: 52rpx;
				}

				.operator-img-finish {
					width: 157rpx;
					height: 52rpx;
				}
			}
		}
	}

	.datajson {
		z-index: 2;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 250px;
		padding: 0 10px;
		background-color: rgba(255, 255, 255, .8);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		font-size: 12px;

		.text {
			margin-top: 10px;
		}

		.item {
			width: 15px;
		}
	}

	.active {
		color: #f3431a !important;
		border-bottom: 1px solid #f3431a;
	}

	.money {
		height: 70rpx;
		border-bottom: 1px solid #f3f3f6;
		font-size: $font-base;
		text-align: center;

		.money2 {
			font-size: 34rpx;
		}
	}

	.pay {
		height: 234rpx;
		padding: 28rpx 38rpx 0;
		position: relative;
		font-size: $font-base;

		.wxpay,
		.alipay {
			display: flex;
			align-items: center;
			position: relative;
		}

		.wxpay {
			margin-bottom: 40rpx;
		}

		.wxpay-img,
		.alipay-img {
			width: 45rpx;
			height: 45rpx;
			margin-right: 20rpx;
		}

		.wxpay-img2,
		.alipay-img2 {
			width: 26rpx;
			height: 26rpx;
			position: absolute;
			right: 0;
		}
	}

	.empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.empty-img {
			width: 182rpx;
			height: 182rpx;
		}
	}
</style>
